<template>
  <div class="header-container">
    <div class="logo">
      <img v-if="!isMobile" src="@/assets/images/login/logo.png" alt="" />
      <img v-else src="@/assets/images/layout/logo.png" alt="" />
    </div>
    <div v-if="!isMobile" class="title">智能运维平台</div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <template v-for="routeItem in route.matched" :key="routeItem.name">
          <a-breadcrumb-item>
            <router-link :to="{ name: routeItem.name }">
              {{ routeItem.meta.title }}
            </router-link>
          </a-breadcrumb-item>
        </template>
      </a-breadcrumb>
    </div>
    <div class="actions">
      <!-- <div class="item">
        <img src="@/assets/images/layout/notice.png" alt="" />
      </div>
      <div class="item">
        <img src="@/assets/images/layout/setting.png" alt="" />
      </div> -->
      <div class="item" @click="logout">
        <a-tooltip>
          <template #title>退出登录</template>
          <img src="@/assets/images/layout/logout.png" alt="logout" />
        </a-tooltip>
      </div>
      <div v-if="isMobile" class="item" @click="emitHeader">
        <img src="@/assets/images/layout/menu.png" alt="menu" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { useStore } from '@/store';
import { computed, createVNode, defineComponent, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { TABS_ROUTES } from '@/store/mutation-types';
import { DEVICE_TYPE } from '@/utils/device';
export default defineComponent({
  components: {
    QuestionCircleOutlined
  },
  props: {
    collapsed: {
      type: Boolean,
      required: true
    }
  },
  emits: ['headerToggle'],
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const visible = ref(false);
    const isMobile = computed(() => {
      return store.state.user.device === DEVICE_TYPE.MOBILE;
    });
    watch(
      () => props.collapsed,
      () => {
        !props.collapsed && (visible.value = false);
      }
    );
    const emitHeader = () => {
      visible.value = !visible.value;
      emit('headerToggle', visible.value);
    };
    // 退出登录
    const logout = () => {
      Modal.confirm({
        title: '您确定要退出登录吗？',
        icon: createVNode(QuestionCircleOutlined),
        onOk: () => {
          store.dispatch('user/logout').then(() => {
            message.success('成功退出登录', 1);
            // 移除标签页
            localStorage.removeItem(TABS_ROUTES);
            setTimeout(() => {
              router
                .replace({
                  name: 'login'
                })
                .finally(() => location.reload());
            }, 1000);
          });
        }
      });
    };

    return {
      route,
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      visible,
      isMobile,
      emitHeader,
      logout
    };
  }
});
</script>

<style scoped lang="less">
.header-container {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  .logo {
    width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 14px 0 32px;
    justify-content: center;
    img {
      width: 91px;
      height: 45px;
    }
  }
  .title {
    font-family: TITLE;
    text-align: center;
    height: 41px;
    font-size: 30px;
    color: #444;
    line-height: 41px;
    letter-spacing: 5px;
  }
  .breadcrumb {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 21px;
    box-sizing: border-box;
  }

  .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 35px;
    box-sizing: border-box;
    .item {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}

@media screen and (max-width: 750px) {
  .header-container {
    .logo {
      width: 50px;
      margin-left: 10px;
      img {
        width: 35px;
        height: 35px;
        object-fit: cover;
      }
    }
    .breadcrumb {
      padding: 0;
    }
    .actions {
      padding-right: 10px;
    }
  }
}
</style>
